<script setup>
import {ref,computed} from 'vue'
const expanded = ref(false);
const emit = defineEmits(['toggle'])
const props = defineProps(['font','noIcon','title','color','bgcolor'])

const togglePanel = () => {
  expanded.value = !expanded.value;
  // 你还可以在这里处理其他逻辑，如发送事件到父组件
  emit('toggle', expanded.value);
};
const fontStyle  = computed(()=>{
  return {
    fontWeight:props?.font  || 'bold'
  }
})
const bgColorStyle= computed(()=>{
  return {
    background:props?.bgcolor || '#f5f5f5'
  }
})
</script>
<template>
  <div class="fold-panel">
    <div class="fold-title" @click="togglePanel">
      <div>
        <span v-if="!noIcon">
        <van-icon name="warn-o" />
        </span>
        <span :style="fontStyle">{{ title }}</span>
      </div>
      <span class="fold-icon" :style="{'color':color}" :class="{'rotate': expanded}">
        <van-icon name="arrow-down" />
      </span>
    </div>
    <div v-if="expanded" class="fold-content">
      <!-- 这里是面板的扩展内容 -->
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">

.fold-panel {
  /* 你可以添加任何通用样式，如边框、内边距等 */
  border-top:1px solid #f7f7f7;
}

.fold-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  font-size:16px;
  color:#000000;
  font-weight:bold;
}

.fold-icon {
  font-size: 16px;
  transition: transform .3s;
  color:#ccc;
}
.fold-content{
  font-size: 16px;
}

.rotate {
  transform: rotate(-180deg);
}
</style>